<template>
  <div class="register-container">
    <div class="register-card">
      <div class="register-header">
        <img src="../assets/logo.svg" alt="Logo" class="logo">
        <h1>创建账户</h1>
        <p>开始您的旅程</p>
      </div>

      <form @submit.prevent="handleSubmit" class="register-form">
        <div class="form-group">
          <label for="username">用户名</label>
          <input
              v-model="form.username"
              type="text"
              id="username"
              placeholder="输入用户名"
              required
          />
        </div>

        <div class="form-group">
          <label for="email">电子邮箱</label>
          <input
              v-model="form.email"
              type="email"
              id="email"
              placeholder="输入邮箱地址"
              required
          />
        </div>

        <div class="form-group">
          <label for="password">密码</label>
          <div class="password-input">
            <input
                v-model="form.password"
                :type="showPassword ? 'text' : 'password'"
                id="password"
                placeholder="输入密码"
                required
            />
            <button
                type="button"
                @click="showPassword = !showPassword"
                class="toggle-password"
            >
              <i :class="showPassword ? 'far fa-eye-slash' : 'far fa-eye'" />
            </button>
          </div>
        </div>

        <div class="form-group">
          <label for="confirmPassword">确认密码</label>
          <input
              v-model="form.confirmPassword"
              type="password"
              id="confirmPassword"
              placeholder="再次输入密码"
              required
          />
          <p v-if="form.password && form.password !== form.confirmPassword" class="error-text">
            密码不匹配
          </p>
        </div>

        <div class="terms-group">
          <input
              v-model="form.agreeTerms"
              type="checkbox"
              id="agreeTerms"
              required
          />
          <label for="agreeTerms">
            我同意 <a href="#" @click.prevent="showModal = true">服务条款</a> 和 <a href="#" @click.prevent="showModal = true">隐私政策</a>
          </label>
        </div>

        <button type="submit" class="submit-btn" :disabled="loading">
          <span v-if="loading">
            <i class="fas fa-spinner fa-spin"></i> 注册中...
          </span>
          <span v-else>立即注册</span>
        </button>

        <div class="login-link">
          已有账户? <router-link to="/login">登录</router-link>
        </div>
      </form>
    </div>

    <!-- 条款模态框 -->
    <div v-if="showModal" class="modal-overlay" @click.self="showModal = false">
      <div class="modal-content">
        <button class="modal-close" @click="showModal = false">
          <i class="fas fa-times"></i>
        </button>
        <h2>服务条款</h2>
        <div class="modal-body">
          <p>这里是服务条款的具体内容...</p>
          <p>请仔细阅读并同意这些条款后再继续注册。</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import authApi from '@/api/auth'
import { useAuthStore } from '@/stores/auth'

const router = useRouter()
const authStore = useAuthStore()

const form = ref({
  username: '',
  email: '',
  password: '',
  confirmPassword: '',
  agreeTerms: false
})

const showPassword = ref(false)
const loading = ref(false)
const showModal = ref(false)
const errorMessage = ref('')

const handleSubmit = async () => {
  // 验证密码是否匹配
  if (form.value.password !== form.value.confirmPassword) {
    errorMessage.value = '两次输入的密码不匹配'
    return
  }

  // 验证是否同意条款
  if (!form.value.agreeTerms) {
    errorMessage.value = '请同意服务条款和隐私政策'
    return
  }

  loading.value = true
  errorMessage.value = ''

  try {
    // 调用注册API
    const response = await authApi.register({
      username: form.value.username,
      email: form.value.email,
      password: form.value.password
    })

    // 注册成功后处理
    if (response.data && response.data.token) {
      // 存储token和用户信息
      authStore.setUser({
        token: response.data.token,
        user: response.data.user
      })

      // 跳转到首页或验证页面
      router.push('/dashboard')
    }
  } catch (error) {
    // 错误处理
    if (error.response) {
      // 服务器返回的错误
      switch (error.response.status) {
        case 400:
          errorMessage.value = '请求参数错误'
          break
        case 409:
          errorMessage.value = '用户名或邮箱已被注册'
          break
        case 500:
          errorMessage.value = '服务器错误，请稍后再试'
          break
        default:
          errorMessage.value = '注册失败，请稍后再试'
      }
    } else if (error.request) {
      // 请求已发出但没有响应
      errorMessage.value = '网络错误，请检查您的连接'
    } else {
      // 其他错误
      errorMessage.value = '发生未知错误'
    }
  } finally {
    loading.value = false
  }
}
</script>

<style scoped>
.register-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: 2rem;
  background-color: #f8fafc;
  background-image: linear-gradient(to bottom right, #f0f4ff, #f8fafc);
}

.register-card {
  width: 100%;
  max-width: 420px;
  padding: 2.5rem;
  background: white;
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
}

.register-header {
  text-align: center;
  margin-bottom: 2rem;
}

.logo {
  width: 60px;
  height: 60px;
  margin-bottom: 1rem;
}

.register-header h1 {
  font-size: 1.5rem;
  font-weight: 600;
  color: #1e293b;
  margin-bottom: 0.5rem;
}

.register-header p {
  color: #64748b;
  font-size: 0.9rem;
}

.register-form {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.form-group label {
  font-size: 0.9rem;
  color: #475569;
  font-weight: 500;
}

.form-group input {
  padding: 0.75rem 1rem;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-size: 0.95rem;
  transition: all 0.2s ease;
}

.form-group input:focus {
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.password-input {
  position: relative;
}

.toggle-password {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #94a3b8;
  cursor: pointer;
}

.error-text {
  font-size: 0.8rem;
  color: #ef4444;
  margin-top: 0.25rem;
}

.terms-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.5rem 0;
}

.terms-group label {
  font-size: 0.85rem;
  color: #475569;
}

.terms-group a {
  color: #6366f1;
  text-decoration: none;
}

.terms-group a:hover {
  text-decoration: underline;
}

.submit-btn {
  padding: 0.75rem;
  background-color: #6366f1;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-top: 0.5rem;
}

.submit-btn:hover {
  background-color: #4f46e5;
}

.submit-btn:disabled {
  background-color: #cbd5e1;
  cursor: not-allowed;
}

.login-link {
  text-align: center;
  font-size: 0.9rem;
  color: #64748b;
  margin-top: 1rem;
}

.login-link a {
  color: #6366f1;
  text-decoration: none;
  font-weight: 500;
}

.login-link a:hover {
  text-decoration: underline;
}

/* 模态框样式 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-content {
  background: white;
  border-radius: 12px;
  width: 90%;
  max-width: 500px;
  padding: 1.5rem;
  position: relative;
  max-height: 80vh;
  overflow-y: auto;
}

.modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: none;
  border: none;
  font-size: 1.25rem;
  color: #64748b;
  cursor: pointer;
}

.modal-content h2 {
  font-size: 1.25rem;
  font-weight: 600;
  color: #1e293b;
  margin-bottom: 1rem;
}

.modal-body {
  font-size: 0.9rem;
  color: #475569;
  line-height: 1.6;
}

@media (max-width: 480px) {
  .register-card {
    padding: 1.5rem;
  }
}
</style>